<template>
  <el-form ref="ruleForm" :rules="rules" :label-width="'120px'" :model="dataForm" class="baseForm">
    <el-form-item label="计划名称：" prop="content">
      <el-input v-model="dataForm.content" :disabled="isReadonly" placeholder="请输入"></el-input>
    </el-form-item>
    <div class="flexFromItem">
      <el-form-item label="循环周期：" style="width: 25%" prop="periodTime">
        <el-input
          v-model="dataForm.periodTime"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          placeholder="请输入"
          :disabled="isReadonly"
          on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
        >
          <template #suffix>
            <i style="font-style: normal; margin-right: 10px">天</i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="下次巡检时间："
        :label-width="'150px'"
        style="width: 25%"
        prop="executeTime"
      >
        <el-date-picker
          v-model="dataForm.executeTime"
          :disabled="isReadonly"
          style="width: 100%"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="限制时间：" style="width: 25%" prop="limitTime">
        <el-input
          v-model="dataForm.limitTime"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          :disabled="isReadonly"
          placeholder="请输入"
          on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
        >
          <template #suffix>
            <i style="font-style: normal; margin-right: 10px">小时</i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="启用状态：" style="width: 25%" prop="type">
        <el-select
          v-model="dataForm.status"
          :disabled="isReadonly"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="dataForm.type === '2' ? '执行提示人：' : '任务人：'"
        style="width: 50%"
        prop="users"
      >
        <ChooseUserByRole v-if="!isReadonly" height="40px" width="100%" @checkUsers="checkUsers" />
        <div v-else class="userText">{{ dataForm.userNames || '空' }}</div>
      </el-form-item>
    </div>
  </el-form>
</template>

<script lang="ts">
// const csv = require('jquery-csv')
import ChooseUserByRole from '@/components/chooseUserByRole/index.vue'
import { ref, watch, onBeforeMount, defineComponent, PropType } from 'vue'

export default defineComponent({
  components: { ChooseUserByRole },
  props: {
    isReadonly: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Object as PropType<SubParams>,
      default() {
        return {
          // do sth
        }
      }
    }
  },
  setup(props: any, ctx) {
    const rules = ref<FormRules>({
      content: [{ required: true, message: '请输入工作内容', trigger: 'blur' }],
      executeTime: [{ required: true, message: '请选择执行时间', trigger: 'change' }],
      limitTime: [{ required: true, message: '请输入限制时间', trigger: 'blur' }],
      periodTime: [{ required: true, message: '请输入周期', trigger: 'blur' }],
      users: [{ required: false, message: '请选择任务人', trigger: 'change' }]
    })

    const dataForm = ref<any>({
      id: null,
      users: []
    })

    const checkUsers = (users: any[]) => {
      console.log(users, 'usersusers')

      const userIds = users.map(user => user.id)
      console.log(userIds, 'userIdsuserIds')
      dataForm.value.users = userIds
    }

    watch(
      () => props.defaultValue,
      newValue => (dataForm.value = { ...newValue })
    )

    onBeforeMount(() => (dataForm.value = { ...props.defaultValue }))

    const ruleForm = ref<any>()

    const checkRule = () => {
      ctx.emit('setBaseParams', dataForm.value)
      let validate = false
      ruleForm.value.validate(async valid => {
        validate = valid
      })
      return validate
    }

    return {
      rules,
      dataForm,
      checkUsers,
      ruleForm,
      checkRule
    }
  }
})
</script>

<style lang="scss">
.patrolDialog {
  .el-dialog__body {
    padding: 0 !important;
  }
  .el-input__inner {
    height: 40px !important;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item__label {
    line-height: 40px;
    font-size: 16px;
  }
}
</style>

<style lang="scss" scoped>
.flexFromItem {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .userText {
    background-color: #eeeeee;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    padding: 0 12px;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
</style>
